<script lang="ts" setup>
import { Api } from "@/apis"
import { onMounted, nextTick, ref } from "vue"
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { homeStoriesStore } from "../../store";
import { MonthArrType } from "@/typing";
import { getPrevMonthDate, getDate,getNowDate } from "@/utils/data-tools";
import { Toast } from 'vant';
import BScroll from "@/utils/betterscroll";
import 'vant/lib/index.css';
import 'vant/es/toast/style';

const router = useRouter()
const store = homeStoriesStore();
const { toggleDate } = storeToRefs(store)
const { updateToggleData, updateIsShow, updateIsTransform } = store
const arr = ref<Array<MonthArrType>>([]);
let dateStr = toggleDate.value;

// 显示数据
let showData = ref<boolean>();
// 显示加载
let showNext = ref<boolean>();
showData.value = false;
showNext.value = false;

updateIsShow(true);

// 获取当天日期
if (toggleDate.value === '0') {
    const dateStr = getNowDate();
    updateToggleData(dateStr);
}

// 初始渲染页面
onMounted(async () => {

    let dataMonth = dateStr === '0' ? String(getDate(dateStr)).substring(0, 7) : dateStr.substring(0, 7);

    let { data } = await Api.getMonthArticles(dataMonth);
    arr.value = [...arr.value, data.data];

    await nextTick()

    setTimeout(() => {
        showData.value = true;
    }, 1000)

    initalBScorll()
})

const scrollEl = ref<HTMLElement>()

// 获取前一天的数据
const getPrevDateStories = async () => {
    let prevDate = getPrevMonthDate(dateStr);
    let prevMonth = getPrevMonthDate(dateStr).substring(0, 7)

    dateStr = prevDate

    const { data } = await Api.getMonthArticles(prevMonth)
    setTimeout(() => {
        showNext.value = false;
        arr.value = [...arr.value, data.data];
    }, 1000)
}

// 初始化Better-Scroll 
const initalBScorll = () => {
    if (scrollEl.value) {
        // 这里的 bscroll 应该放到外部
        const bscroll = new BScroll(scrollEl.value, {
            pullUpLoad: true,
            probeType: 3,
            click: true // BScroll 滑动元素内部可以被点击
        })
        const pullingUpHandler = async () => {
            await getPrevDateStories()
            // 数据重新渲染
            await nextTick()
            // 刷新betterscroll 重新计算儿子的高度
            bscroll.refresh()
            // 通知betterscroll 上拉加载结束了
            bscroll.finishPullUp();

        }
        bscroll.on('pullingUp', () => {
            setTimeout(() => {
                pullingUpHandler();
                showNext.value = true;
            }, 500);
        })
    }
}

// 修改全局日期
function updateDate(date: string) {
    updateToggleData(date);
    updateIsShow(false);
    updateIsTransform(false);
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
    });
    router.push({ name: 'home' })
}
</script>


<template>
    <div ref="scrollEl" class=" bg-white w-screen z-40 h-screen absolute bottom-0 left-0 ">
        <van-loading type="spinner" color="#aaa" class="w-32 absolute top-32 van-left" v-show="!showData" />
        <div class="h-screen w-screen overflow-auto pt-10" v-show="showData">
            <div v-for="(m, i) in arr" :key="i" class="mb-8">
                <van-divider :style="{ color: '#aaa', borderColor: '#aaa', padding: '0 16px' }">{{
                        m[0].date.substring(5, 7)
                }}月</van-divider>

                <div class="flex flex-wrap pl-3">
                    <div v-for="(l, index) in m" :key="index" class="w-5/12 mx-6 my-5  border"
                        :class="l.date === toggleDate ? 'border-gray-500 text-gray-500' : 'border-gray-300 text-gray-400'"
                        @click="updateDate(l.date)">
                        <img v-lazy="l.cover" />
                        <div class="text-center  py-4"> {{ l.date }}</div>
                    </div>
                </div>
            </div>
        </div>
        <van-loading type="spinner" color="#aaa" class="mb-12 py-5 text-center" v-show="showNext" />
    </div>
</template>

<style>
.van-divider {
    margin: 0 !important;
}

.van-left {
    margin-left: 46%;
}
</style>